<template>
	<view>
		<view class="header">
			<image src="https://img2.baidu.com/it/u=599153157,3316719523&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350"
				mode=""></image>
			<text>Smart Farm</text>
		</view>

		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="username">
					<input class="input" v-model="formData.username" type="text" placeholder="用户名"
						@input="binddata('username',$event.detail.value)" />
				</uni-forms-item>
				
				<uni-forms-item name="password" v-if="ispasswordshow">
					<input class="input" v-model="formData.password" type="text" placeholder="密码"
						@input="binddata('password',$event.detail.value)" />
						<text class="icon-eye" @click="ispasswordshow = !ispasswordshow"></text>
				</uni-forms-item>
				<uni-forms-item name="password" v-else>
					<input class="input" v-model="formData.password" type="text" placeholder="密码"
						@input="binddata('password',$event.detail.value)" password />
						<text class="icon-eye-blocked" @click="ispasswordshow = !ispasswordshow"></text>
				</uni-forms-item>
				
				<uni-forms-item name="authCode">
					<input class="input last" v-model="formData.authCode" type="text" placeholder="验证码"
						@input="binddata('authCode',$event.detail.value)" />
					<image :src="AuthCode.img_url" mode="" @click="getAuthCode"></image>
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">→</button>
		</view>
		
		<view class="register" @click="goregister">
			还没账号?点击注册
		</view>
		
		<view class="forget" @click="showModal">
			忘记密码？
		</view>
		
	</view>
</template>

<script>
	import {
		getAuthCode
	} from '../../api/getAuthCode.js'
	import {
		getSignUserInfo
	} from '../../api/user.js'
	import {
		loginUser
	} from '../../api/user.js'
	export default {
		data() {
			return {
				ispasswordshow: false,
				AuthCode: {},
				signUserInfo: [],
				formData: {
					username: '',
					password: '',
					authCode: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 3,
								maxLength: 20,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 8,
								errorMessage: '密码长度最少{minLength}个字符',
							}
						]
					},
					authCode: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					}
				}
			}
		},
		onLoad() {
			this.getAuthCode()
			this.getSignUserInfo()
		},
		methods: {
			async getAuthCode() {
				const { data: res } = await getAuthCode()
				this.AuthCode = res.data
			},
			async getSignUserInfo() {
				const res = await getSignUserInfo()
				this.signUserInfo = res.data.data
			},
			submit() {
				this.$refs.form.validate().then(async res => {
					res.authCodeKey = this.AuthCode.authCodeKey
					const response= await loginUser(res)
					if(response.statusCode == 802){
						this.getAuthCode()
						if(response.data.msg == '验证码错误'){
							uni.showToast({
								title:'验证码错误',
								icon:'error'
							})
						}
						if(response.data.msg == '账号/密码错误'){
							uni.showToast({
								title:'账号/密码错误',
								icon:'error'
							})
						}
					}
					if(response.statusCode == 200){
						uni.setStorageSync('token',response.data.data.token)
						this.$store.commit('initUserInfo',response.data.data)
						uni.showToast({
							title:'登录成功',
							success() {
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}
				}).catch(err => {
					console.log('表单误信息：', err);
				})
			},
			showModal(){
				uni.showModal({
				    title: '忘记密码',
				    content: '请联系QQ：1815846446',
					showCancel: false,
					confirmColor: '#3fa1c2'
				})
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="less">
	.header {
		margin-top: 100rpx;
		margin-bottom: 30rpx;
		text-align: center;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
			vertical-align: middle;
			border-radius: 50%;
		}

		text {
			font-size: 50rpx;
		}
	}
	
	.form {
		padding-left: 80rpx;
	}
	.uni-forms-item {
		position: relative;
		image {
			width: 130rpx;
			height: 60rpx;
			vertical-align: middle;
			margin-left: 40rpx;
		}

		.input {
			width: 580rpx;
			height: 100rpx;
			background-color: #e8ebf2;
			border-radius: 50rpx;
			text-align: center;

			&.last {
				display: inline-block;
				vertical-align: middle;
				width: 400rpx;
			}
		}
		[class ^= icon-eye] {
			position: absolute;
			top: 35rpx;
			right: 130rpx;
			z-index: 999;
			&::before {
				font-size: 38rpx;
			}
		}
	}

	button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		width: 130rpx;
		height: 130rpx;
		text-align: center;
		line-height: 130rpx;
		font-size: 70rpx;
		color: #fff;
		background-color: #85c2fc;
		border-radius: 50%;
	}
	
	.register {
		position: absolute;
		bottom: 450rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 30rpx;
		color: #0082cf;
	}
	
	.forget {
		position: absolute;
		bottom: 350rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 30rpx;
	}
</style>
